<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8"/>
    <title>矩阵计算器</title>
    <script src="../js/math.js" charset="utf-8"></script>
    <!--layui的css-->
    <link rel="stylesheet" href="../js/layui/layui/css/layui.css" media="all" type="text/css">

    <script src="../js/jquery.min.js" charset="utf-8"></script>
    <script src="../js/layui/layui/layui.js" charset="utf-8"></script>

    <!--自建的css文件-->
    <link href="../css/myMainCss.css" rel="stylesheet" type="text/css"/>

    <!--<script src="js/jexcel.js"></script>
    <script src="js/jsuites.js"></script>
    <link rel="stylesheet" href="css/jsuites.css" type="text/css"/>
    <link rel="stylesheet" href="css/jexcel.css" type="text/css" />-->

    <script src="../js/handsontable.full.min.js"></script>
    <link rel="stylesheet" href="../css/handsontable.full.min.css" type="text/css"/>

</head>

<body>
<!--banner-->
<div>
    <span style="">矩阵简单计算器</span>
</div>

<!--内容-->
<div>

    <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
        <ul class="layui-tab-title" style="margin-left: 3px;">
            <li class="layui-this">点积(dot product)</li>
            <li>商</li>
            <li>逆</li>
            <li>幂</li>
            <li>叉积(cross product)</li>
            <li>行列式(det)</li>
        </ul>

        <div class="layui-tab-content" style="height: 70%; width: 90%; position: absolute; left: 5%;  ">

            <!--选项卡1内容-->
            <div class="layui-tab-item layui-show " style="position: absolute; width: 75%; height: 80%; top: 10%;   ">

                <!--矩阵形状-->
                <div>
                    <p>
                        <span>矩阵A:</span>
                        <input type="text" name="mat_a" id="input_rowNum_1_a" value=""/>行 &nbsp;
                        <input type="text" name="mat_a" id="input_colNum_1_a" value=""/>列
                    </p>

                    <p>
                        <span>矩阵B:</span>
                        <input type="text" name="mat_a" id="input_rowNum_1_b" value=""/>行 &nbsp;
                        <input type="text" name="mat_a" id="input_colNum_1_b" value=""/>列
                    </p>

                    <p>
                        <input type="button" id="but_shape_1" value="确 认 生 成 矩 阵"/>
                    </p>

                </div>

                <!--矩阵A-->
                <div>
                    <p>
                        矩阵A:
                    </p>
                    <div id="myTable_1_a"></div>
                </div>

                <!--矩阵B-->
                <div>
                    <p>
                        矩阵B:
                    </p>
                    <div id="myTable_1_b"></div>
                </div>

                <!--计算结果-->
                <div>
                    <p>
                        <input type="button" id="but_result_1" value="点 击 计 算 结 果"/>
                    </p>
                    <p>
                        计算结果:
                    </p>

                    <div id="myTable_1_r"></div>
                </div>

            </div>
            <!--选项卡1内容结束==============================-->

            <!--选项卡2内容-->
            <div class="layui-tab-item  " style="position: absolute; width: 75%; height: 80%; top: 10%;">

                <!--填写矩阵形状-->
                <div>
                    <p>
                        <span>矩阵A:</span>
                        <input type="text" id="input_rowNum_mat_2_a" value=""/>行 &nbsp;
                        <input type="text" id="input_colNum_mat_2_a" value=""/>列
                    </p>

                    <p>
                        <span>矩阵B:</span>
                        <input type="text" id="input_rowNum_mat_2_b" value=""/>行 &nbsp;
                        <input type="text" id="input_colNum_mat_2_b" value=""/>列
                    </p>

                    <p>
                        <input type="button" id="but_shape_2" value="确 认 生 成 矩 阵"/>
                    </p>

                </div>

                <!--矩阵A-->
                <div>
                    <p>
                        矩阵A:
                    </p>
                    <div id="myTable_2_a"></div>
                </div>

                <!--矩阵B-->
                <div>
                    <p>
                        矩阵B:
                    </p>
                    <div id="myTable_2_b"></div>
                </div>

                <!--计算结果-->
                <div>
                    <p>
                        <input type="button" id="but_result_2" value="点 击 计 算 结 果"/>
                    </p>
                    <p>
                        计算结果:
                    </p>

                    <div id="myTable_2_r"></div>
                </div>

            </div>
            <!--选项卡2内容结束============================-->

            <!--选项卡3内容-->
            <div class="layui-tab-item " style="position: absolute; width: 75%; height: 80%; top: 10%;">

                <!--填写矩阵形状-->
                <div>
                    <p>
                        <span>矩阵A:</span>
                        <input type="text" name="mat_a" id="input_rowNum_3_a" value=""/>行 &nbsp;
                        <input type="text" name="mat_a" id="input_colNum_3_a" value=""/>列
                    </p>

                    <p>
                        <input type="button" id="but_shape_3" value="确 认 生 成 矩 阵"/>
                    </p>

                </div>

                <!--矩阵A-->
                <div>
                    <p>
                        矩阵A:
                    </p>
                    <div id="myTable_3_a"></div>
                </div>

                <!--计算结果-->
                <div>
                    <p>
                        <input type="button" id="but_result_3" value="点 击 计 算 结 果"/>
                    </p>
                    <p>
                        计算结果:
                    </p>

                    <div id="myTable_3_r"></div>
                </div>

            </div>
            <!--选项卡3内容结束============================================-->

            <!--选项卡4内容 计算幂 -->
            <div class="layui-tab-item " style="position: absolute; width: 75%; height: 80%; top: 10%;">

                <!--填写矩阵形状-->
                <div>
                    <p>
                        <span>矩阵A:</span>
                        <input type="text" id="input_rowNum_4_a" value=""/>行 &nbsp;
                        <input type="text" id="input_colNum_4_a" value=""/>列
                    </p>
                    <p>
                        <span>次  数 :</span>
                        <input type="text" id="input_exponent" value=""/>
                    </p>

                    <p>
                        <input type="button" id="but_shape_4" value="确 认 生 成 矩 阵"/>
                    </p>

                </div>

                <!--矩阵A-->
                <div>
                    <p>
                        矩阵A:
                    </p>
                    <div id="myTable_4_a"></div>
                </div>

                <!--计算结果-->
                <div>
                    <p>
                        <input type="button" id="but_result_4" value="点 击 计 算 结 果"/>
                    </p>
                    <p>
                        计算结果:
                    </p>

                    <div id="myTable_4_r"></div>
                </div>

            </div>
            <!--选项卡4内容结束===============================================-->

            <!--选项卡5内容  计算叉积-->
            <div class="layui-tab-item " style="position: absolute; width: 75%; height: 80%; top: 10%;">

                <!--矩阵形状-->
                <div>
                    <p>
                        <span>矩阵A:</span>
                        <input type="text" id="input_rowNum_5_a" value=""/>行 &nbsp;
                        <input type="text" id="input_colNum_5_a" value=""/>列
                    </p>

                    <p>
                        <span>矩阵B:</span>
                        <input type="text" id="input_rowNum_5_b" value=""/>行 &nbsp;
                        <input type="text" id="input_colNum_5_b" value=""/>列
                    </p>

                    <p>
                        <input type="button" id="but_shape_5" value="确 认 生 成 矩 阵"/>
                    </p>

                </div>

                <!--矩阵A-->
                <div>
                    <p>
                        矩阵A:
                    </p>
                    <div id="myTable_5_a"></div>
                </div>

                <!--矩阵B-->
                <div>
                    <p>
                        矩阵B:
                    </p>
                    <div id="myTable_5_b"></div>
                </div>

                <!--计算结果-->
                <div>
                    <p>
                        <input type="button" id="but_result_5" value="点 击 计 算 结 果"/>
                    </p>
                    <p>
                        计算结果:
                    </p>

                    <div id="myTable_5_r"></div>
                </div>

            </div>
            <!--选项卡5内容结束==============================================-->

            <!--选项卡6内容--------------------------------------------------->
            <div class="layui-tab-item " style="position: absolute; width: 75%; height: 80%; top: 10%;">

                <!--填写矩阵形状-->
                <div>
                    <p>
                        <span>矩阵A:</span>
                        <input type="text" id="input_rowNum_6_a" value=""/>行 &nbsp;
                        <input type="text" id="input_colNum_6_a" value=""/>列
                    </p>

                    <p>
                        <input type="button" id="but_shape_6" value="确 认 生 成 矩 阵"/>
                    </p>

                </div>

                <!--矩阵A-->
                <div>
                    <p>
                        矩阵A:
                    </p>
                    <div id="myTable_6_a"></div>
                </div>

                <!--计算结果-->
                <div>
                    <p>
                        <input type="button" id="but_result_6" value="点 击 计 算 结 果"/>
                    </p>
                    <p>
                        计算结果:
                    </p>

                    <span id="span_6_r"></span>
                </div>

            </div>
            <!--选项卡6内容结束=============================================-->
        </div>
        <!--content结束-->
    </div>
    <!--tab整体结束-->
</div>


<!--表格的js-->
<script type="application/javascript">

    //初始化数据
    const data = [
        [0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0]
    ];

    //选项卡1--计算点积-----------------------------------------
    //点击按钮生成表格
    var but_shape_1 = document.getElementById("but_shape_1");
    but_shape_1.onclick = showTableFromShape_1;

    //定义矩阵行列数
    var input_rowNum_1_a = document.getElementById("input_rowNum_1_a");
    var input_colNum_1_a = document.getElementById("input_colNum_1_a");
    var input_rowNum_1_b = document.getElementById("input_rowNum_1_b");
    var input_colNum_1_b = document.getElementById("input_colNum_1_b");


    const myTable_1_a = document.getElementById('myTable_1_a');
    const ht_1_a = new Handsontable(myTable_1_a, {
        data: data,
        rowHeaders: true,
        colHeaders: function (index) {
            return index_old + 1;
        },
        licenseKey: 'non-commercial-and-evaluation'
    });

    const myTable_1_b = document.getElementById('myTable_1_b');
    const ht_1_b = new Handsontable(myTable_1_b, {
        data: data,
        rowHeaders: true,
        colHeaders: function (index) {
            return index_old + 1;
        },
        licenseKey: 'non-commercial-and-evaluation'
    });

    const myTable_1_r = document.getElementById('myTable_1_r');
    const ht_1_r = new Handsontable(myTable_1_r, {
        data: data,
        rowHeaders: true,
        colHeaders: function (index) {
            return index_old + 1;
        },
        licenseKey: 'non-commercial-and-evaluation'
    });

    function showTableFromShape_1() {

        var rowNum_1_a = input_rowNum_1_a.value;
        var colNum_1_a = input_colNum_1_a.value;
        var rowNum_1_b = input_rowNum_1_b.value;
        var colNum_1_b = input_colNum_1_b.value;

        var data_1_a = new Array();
        for (var k = 0; k < rowNum_1_a; k++) {
            data_1_a[k] = new Array();
            for (var j = 0; j < colNum_1_a; j++) {
                data_1_a[k][j] = 0;
            }
        }

        var data_1_b = new Array();
        for (var q = 0; q < rowNum_1_b; q++) {
            data_1_b[q] = new Array();
            for (var t = 0; t < colNum_1_b; t++) {
                data_1_b[q][t] = 0;
            }
        }

        ht_1_a.updateSettings({
            data: data_1_a
        });

        ht_1_b.updateSettings({
            data: data_1_b
        });

    }

    //点击按钮计算显示结果
    var but_result_1 = document.getElementById("but_result_1");
    but_result_1.onclick = getResult_1;

    function getResult_1() {
        //从表格中取数据
        var data_1_a = ht_1_a.getData();
        var data_1_b = ht_1_b.getData();
        var data_1_r = math.multiply(data_1_a, data_1_b);

        console.log(data_1_r);

        ht_1_r.updateSettings({
            data: data_1_r
        });
    }

    //选项卡1--计算点积==============================================


    //选项卡2--计算商------------------------------------------------
    //点击按钮生成表格
    var but_shape_2 = document.getElementById("but_shape_2");
    but_shape_2.onclick = showTableFromShape_2;

    //定义矩阵行列数
    var input_rowNum_mat_2_a = document.getElementById("input_rowNum_mat_2_a");
    var input_colNum_mat_2_a = document.getElementById("input_colNum_mat_2_a");
    var input_rowNum_mat_2_b = document.getElementById("input_rowNum_mat_2_b");
    var input_colNum_mat_2_b = document.getElementById("input_colNum_mat_2_b");

    const myTable_2_a = document.getElementById('myTable_2_a');
    const ht_2_a = new Handsontable(myTable_2_a, {
        data: data,
        rowHeaders: true,
        colHeaders: function (index) {
            return index_old + 1;
        },
        licenseKey: 'non-commercial-and-evaluation'
    });

    const myTable_2_b = document.getElementById('myTable_2_b');
    const ht_2_b = new Handsontable(myTable_2_b, {
        data: data,
        rowHeaders: true,
        colHeaders: function (index) {
            return index_old + 1;
        },
        licenseKey: 'non-commercial-and-evaluation'
    });

    const myTable_2_r = document.getElementById('myTable_2_r');
    const ht_2_r = new Handsontable(myTable_2_r, {
        data: data,
        rowHeaders: true,
        colHeaders: function (index) {
            return index_old + 1;
        },
        licenseKey: 'non-commercial-and-evaluation'
    });

    function showTableFromShape_2() {

        var a_num_row = input_rowNum_mat_2_a.value;
        var a_num_col = input_colNum_mat_2_a.value;
        var b_num_row = input_rowNum_mat_2_b.value;
        var b_num_col = input_colNum_mat_2_b.value;

        var data_2_a = new Array();
        for (var k = 0; k < a_num_row; k++) {
            data_2_a[k] = new Array();
            for (var j = 0; j < a_num_col; j++) {
                data_2_a[k][j] = 0;
            }
        }

        var data_2_b = new Array();
        for (var q = 0; q < b_num_row; q++) {
            data_2_b[q] = new Array();
            for (var t = 0; t < b_num_col; t++) {
                data_2_b[q][t] = 0;
            }
        }

        ht_2_a.updateSettings({
            data: data_2_a
        });

        ht_2_b.updateSettings({
            data: data_2_b
        });

    }

    //点击按钮计算显示结果
    var bnt_result_2 = document.getElementById("but_result_2");
    bnt_result_2.onclick = getResult_2;

    function getResult_2() {
        //从表格中取数据
        var a_data = ht_2_a.getData();
        var b_data = ht_2_b.getData();
        var data_1_r = math.inv(b_data);
        data_1_r = math.multiply(a_data, data_1_r);

        ht_2_r.updateSettings({
            data: data_1_r
        });
    }

    //选项卡2--计算商===============================================


    //选项卡3--计算逆--------------------------------------------
    //点击按钮生成表格
    var but_shape_3 = document.getElementById("but_shape_3");
    but_shape_3.onclick = showTableFromShape_3;

    //定义矩阵行列数
    var input_rowNum_3_a = document.getElementById("input_rowNum_3_a");
    var input_colNum_3_a = document.getElementById("input_colNum_3_a");

    const myTable_3_a = document.getElementById('myTable_3_a');
    const ht_3_a = new Handsontable(myTable_3_a, {
        data: data,
        rowHeaders: true,
        colHeaders: function (index) {
            return index_old + 1;
        },
        licenseKey: 'non-commercial-and-evaluation'
    });

    const myTable_3_r = document.getElementById('myTable_3_r');
    const ht_3_r = new Handsontable(myTable_3_r, {
        data: data,
        rowHeaders: true,
        colHeaders: function (index) {
            return index_old + 1;
        },
        licenseKey: 'non-commercial-and-evaluation'
    });

    function showTableFromShape_3() {

        var rowNum_3_a = input_rowNum_3_a.value;
        var colNum_3_a = input_colNum_3_a.value;

        var data_3_a = new Array();
        for (var k = 0; k < rowNum_3_a; k++) {
            data_3_a[k] = new Array();
            for (var j = 0; j < colNum_3_a; j++) {
                data_3_a[k][j] = 0;
            }
        }

        ht_3_a.updateSettings({
            data: data_3_a
        });

    }

    //点击按钮计算显示结果
    var but_result_3 = document.getElementById("but_result_3");
    but_result_3.onclick = getResult_3;

    function getResult_3() {
        //从表格中取数据
        var data_3_a = ht_3_a.getData();
        var data_3_r = math.inv(data_3_a);

        // console.log(data_3_r);

        ht_3_r.updateSettings({
            data: data_3_r
        });
    }

    //选项卡3--计算逆=============================================


    //选项卡4--计算幂--------------------------------------------
    //点击按钮生成表格
    var but_shape_4 = document.getElementById("but_shape_4");
    but_shape_4.onclick = showTableFromShape_4;

    //定义矩阵行列数
    var input_rowNum_4_a = document.getElementById("input_rowNum_4_a");
    var input_colNum_4_a = document.getElementById("input_colNum_4_a");

    var input_exponent = document.getElementById("input_exponent");

    const myTable_4_a = document.getElementById('myTable_4_a');
    const ht_4_a = new Handsontable(myTable_4_a, {
        data: data,
        rowHeaders: true,
        colHeaders: function (index) {
            return index_old + 1;
        },
        licenseKey: 'non-commercial-and-evaluation'
    });

    const myTable_4_r = document.getElementById('myTable_4_r');
    const ht_4_r = new Handsontable(myTable_4_r, {
        data: data,
        rowHeaders: true,
        colHeaders: function (index) {
            return index_old + 1;
        },
        licenseKey: 'non-commercial-and-evaluation'
    });

    function showTableFromShape_4() {

        var rowNum_4_a = input_rowNum_4_a.value;
        var colNum_4_a = input_colNum_4_a.value;

        var data_4_a = new Array();
        for (var k = 0; k < rowNum_4_a; k++) {
            data_4_a[k] = new Array();
            for (var j = 0; j < colNum_4_a; j++) {
                data_4_a[k][j] = 0;
            }
        }

        ht_4_a.updateSettings({
            data: data_4_a
        });

    }

    //点击按钮计算显示结果
    var but_result_4 = document.getElementById("but_result_4");
    but_result_4.onclick = getResult_4;

    function getResult_4() {
        //从表格中取数据
        var data_4_a = ht_4_a.getData();
        var data_4_r = math.multiply(data_4_a, data_4_a);

        var exponentNum = input_exponent.value;

        for (var i = 2; i < exponentNum; i++) {
            data_4_r = math.multiply(data_4_r, data_4_a);
        }

        ht_4_r.updateSettings({
            data: data_4_r
        });
    }
    //选项卡4--计算幂===========================================


    //选项卡5--计算叉积-----------------------------------------
    //点击按钮生成表格
    var but_shape_5 = document.getElementById("but_shape_5");
    but_shape_5.onclick = showTableFromShape_5;

    //定义矩阵行列数
    var input_rowNum_5_a = document.getElementById("input_rowNum_5_a");
    var input_colNum_5_a = document.getElementById("input_colNum_5_a");
    var input_rowNum_5_b = document.getElementById("input_rowNum_5_b");
    var input_colNum_5_b = document.getElementById("input_colNum_5_b");


    const myTable_5_a = document.getElementById('myTable_5_a');
    const ht_5_a = new Handsontable(myTable_5_a, {
        data: data,
        rowHeaders: true,
        colHeaders: function (index) {
            return index_old + 1;
        },
        licenseKey: 'non-commercial-and-evaluation'
    });

    const myTable_5_b = document.getElementById('myTable_5_b');
    const ht_5_b = new Handsontable(myTable_5_b, {
        data: data,
        rowHeaders: true,
        colHeaders: function (index) {
            return index_old + 1;
        },
        licenseKey: 'non-commercial-and-evaluation'
    });

    const myTable_5_r = document.getElementById('myTable_5_r');
    const ht_5_r = new Handsontable(myTable_5_r, {
        data: data,
        rowHeaders: true,
        colHeaders: function (index) {
            return index_old + 1;
        },
        licenseKey: 'non-commercial-and-evaluation'
    });

    function showTableFromShape_5() {

        var rowNum_5_a = input_rowNum_5_a.value;
        var colNum_5_a = input_colNum_5_a.value;
        var rowNum_5_b = input_rowNum_5_b.value;
        var colNum_5_b = input_colNum_5_b.value;

        var data_5_a = new Array();
        for (var k = 0; k < rowNum_5_a; k++) {
            data_5_a[k] = new Array();
            for (var j = 0; j < colNum_5_a; j++) {
                data_5_a[k][j] = 0;
            }
        }

        var data_5_b = new Array();
        for (var q = 0; q < rowNum_5_b; q++) {
            data_5_b[q] = new Array();
            for (var t = 0; t < colNum_5_b; t++) {
                data_5_b[q][t] = 0;
            }
        }

        ht_5_a.updateSettings({
            data: data_5_a
        });

        ht_5_b.updateSettings({
            data: data_5_b
        });

    }

    //点击按钮计算显示结果
    var but_result_5 = document.getElementById("but_result_5");
    but_result_5.onclick = getResult_5;

    function getResult_5() {
        //从表格中取数据
        var data_5_a = ht_5_a.getData();
        var data_5_b = ht_5_b.getData();
        var data_5_r = math.cross(data_5_a, data_5_b);

        ht_5_r.updateSettings({
            data: data_5_r
        });
    }
    //选项卡5--计算叉积==============================================


    //选项卡6--计算行列式--------------------------------------------------
    //点击按钮生成表格
    var but_shape_6 = document.getElementById("but_shape_6");
    but_shape_6.onclick = showTableFromShape_6;

    //定义矩阵行列数
    var input_rowNum_6_a = document.getElementById("input_rowNum_6_a");
    var input_colNum_6_a = document.getElementById("input_colNum_6_a");

    const myTable_6_a = document.getElementById('myTable_6_a');
    const ht_6_a = new Handsontable(myTable_6_a, {
        data: data,
        rowHeaders: true,
        colHeaders: function (index) {
            return index_old + 1;
        },
        licenseKey: 'non-commercial-and-evaluation'
    });

    const span_6_r = document.getElementById('span_6_r');


    function showTableFromShape_6() {

        var rowNum_6_a = input_rowNum_6_a.value;
        var colNum_6_a = input_colNum_6_a.value;

        var data_6_a = new Array();
        for (var k = 0; k < rowNum_6_a; k++) {
            data_6_a[k] = new Array();
            for (var j = 0; j < colNum_6_a; j++) {
                data_6_a[k][j] = 0;
            }
        }

        ht_6_a.updateSettings({
            data: data_6_a
        });

    }

    //点击按钮计算显示结果
    var but_result_6 = document.getElementById("but_result_6");
    but_result_6.onclick = getResult_6;

    function getResult_6() {
        //从表格中取数据
        var data_6_a = ht_6_a.getData();
        var data_6_r = math.det(data_6_a);

        console.log(data_6_r);

        span_6_r.innerText = data_6_r;
    }


    //选项卡6结束--计算行列式==============================================

</script>

</body>

<!--tab选项卡代码-->
<!--layui的非模块化的js-->
<script type="text/javascript">
    layui.use('element', function () {
        var $ = layui.jquery,
            element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块

        //触发事件
        var active = {
            tabAdd: function () {
                //新增一个Tab项
                element.tabAdd('demo', {
                    title: '新选项' + (Math.random() * 1000 | 0) //用于演示
                    ,
                    content: '内容' + (Math.random() * 1000 | 0),
                    id: new Date().getTime() //实际使用一般是规定好的id，这里以时间戳模拟下
                })
            },
            tabDelete: function (othis) {
                //删除指定Tab项
                element.tabDelete('demo', '44'); //删除：“商品管理”

                othis.addClass('layui-btn-disabled');
            },
            tabChange: function () {
                //切换到指定Tab项
                element.tabChange('demo', '22'); //切换到：用户管理
            }
        };

        $('.site-demo-active').on('click', function () {
            var othis = $(this),
                type = othis.data('type');
            active[type] ? active[type].call(this, othis) : '';
        });

        //Hash地址的定位
        var layid = location.hash.replace(/^#test=/, '');
        element.tabChange('test', layid);

        element.on('tab(test)', function (elem) {
            location.hash = 'test=' + $(this).attr('lay-id');
        });

    });
</script>

</html>